import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Text,
  Image,
  SafeAreaView,
  TouchableOpacity,
  ImageBackground
} from 'react-native'
import NavBar from '../../../../components/PublicHeader';
import ImagePicker from 'react-native-image-crop-picker';
// import ImagePickers from 'react-native-image-picker';
import {
  deviceWidth,
  deviceHeight,
} from '../../../../utils/Global';

export default class backgroundSettings extends Component {
  constructor(props) {
    super(props)
    this.state = {
      //默认图片
      backgroundVideo: [{
        BgImg: require('../../../../assets/images/search/unsplash_hwLAI5lRhdM.png'),
        picture: true,
        path: '../../../../assets/video/1656922031515097.mp4'
      },
      {
        BgImg: require('../../../../assets/images/search/unsplash_ka6WGHXcFMY.png'),
        picture: false,
        path: '../../../../assets/video/1656922039711511.mp4'
      },
      {
        BgImg: require('../../../../assets/images/search/unsplash_CSpjU6hYo_0.png'),
        picture: false,
        path: '../../../../assets/video/1656922172341410.mp4'
      },
      ]
    }
  }

  componentDidMount = () => { }

  // 背景图片切换
  SelectMemberPackageItem(index, tail, Videopath) {
    if (tail == true) {
      this.props.navigation.push('message',
        { Videopath: Videopath, index: index })
    }
    const selectMemberPackageItem = this.state.backgroundVideo
    selectMemberPackageItem.map((item, selectMemberPackageIndex) => {
      this.setState({
        picture: item.picture = false
      })
      if (index == selectMemberPackageIndex) {
        this.setState({
          picture: item.picture = !item.picture
        })
      }
    })
  }
  // 弹窗视频设置完成
  completeDataFN() {
    this.props.navigation.goBack()
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <NavBar
          navigation={this.props.navigation}
          title={"背景视频"}
          right={"完成"}
          hideLeftArrow={false}
          pressRight={() => {
            this.completeDataFN()
          }}
        />
        <View style={styles.General}>
          {
            this.state.backgroundVideo.map((item, index) => (
              <TouchableOpacity key={index}
                onPress={() => (
                  this.state.backgroundVideo.length == index ? null :
                    this.SelectMemberPackageItem(index, item.picture, item.path)
                )}>
                <View style={styles.items}>
                  <ImageBackground source={index <= 4 ?
                    item.BgImg : { uri: item.path }}
                    style={styles.systemPrompt}
                  >
                    {this.state.backgroundVideo.length == index ?
                      null : <Text style={item.picture ?
                        styles.tali : styles.talis} >
                        <Image source={item.picture ?
                          require('../../../../assets/images/search/Vector-conl.png') :
                          require('../../../../assets/images/search/Vector-fs.png')}  >

                        </Image>
                      </Text>}
                  </ImageBackground>
                </View>
              </TouchableOpacity>
            ))
          }
          {/* 上传图片 */}
          <TouchableOpacity style={styles.items}
            onPress={() => {
              ImagePicker.openPicker({
                width: 400,
                height: 400,
                // cropping: true,
                multiple: true,
                mediaType: 'video'
              }).then(images => {
                this.setState({
                  pushImages: (images.map((item, index) => {
                    this.state.backgroundVideo.push(item)
                  }))
                })
                // this._handlePictureRes(images);
              })
                .catch(err => {
                  console.log(err);
                })
            }}>
            <Image source={require("../../../../assets/images/search/Groups.png")}
              style={styles.systemPrompt}
              onPress={() => {
                this.props.navigation.navigate("recentAlbum")
              }} />
          </TouchableOpacity>
        </View>
      </SafeAreaView >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  General: {
    flexDirection: "row",
    flexWrap: 'wrap',
  },

  tali: {
    backgroundColor: "#1890FF",
    position: 'absolute',
    bottom: 0,
    width: "100%",
    height: 20,
    lineHeight: 20,
    textAlign: 'center',
    // borderBottomLeftRadius: 5,
    // borderBottomRightRadius: 5
  },
  talis: {
    position: 'absolute',
    bottom: 0,
    width: "100%",
    textAlign: 'center',
    height: 20,
    lineHeight: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.40)',
    // borderBottomLeftRadius: 5,
    // borderBottomRightRadius: 5
  },

  items: {
    marginTop: 7,
    marginBottom: 5,
    marginRight: deviceWidth / 25,
    marginLeft: deviceWidth / 25,
    borderRadius: 5,
  },
  myAlbumDatasWarper: {
    position: "relative"
  },
  systemPrompt: {
    width: deviceWidth / 4,
    height: deviceHeight / 8,
    borderRadius: 3
  },
})